<template>
    <div class="icon-list">
        <div class="icon-item" v-for="item in list" :key="item.icon">
            <SvgIcon class="icon" :iconName="item.icon" />
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
import { ref } from 'vue'
const list = ref([
  { id: 1, icon: 'meirituijian', name: '每日推荐' },
  { id: 2, icon: 'fm', name: '私人FM' },
  { id: 3, icon: 'gedan', name: '歌单' },
  { id: 4, icon: 'paihangbang', name: '排行榜' }
])

</script>

<style lang="scss" scoped>
.icon-list {
  display: flex;
  justify-content: space-between;
  margin-top: .3rem;
  ::v-deep() {
    .icon {
      width: .8rem;
      height: .8rem;
    }
  }
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
